<template>
    
    <div class="login-box">
        <el-row class="login-box-div">
            <el-col :span="16" class="login-box-left">
                <div>
                    <img src="../../assets/bg.jpg" class="logo vue" alt="Vue logo" style="width: 100%; height: 100%;"/>
                </div>
            </el-col>
            <el-col :span="8" class="login-box-right">
                
                <div>

                    <el-form ref="loginFormRef" style="max-width: 600px" label-width="auto" class="loginForm">

                        <h1>后台登录</h1>
                        <el-form-item label="账号">
                            <el-input v-model="data.formData.userName" autocomplete="off" clearable/>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input v-model="data.formData.password" type="password" autocomplete="off"  show-password/>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="sub-btn" type="primary" @click="submit()" @keydown.enter="keydown()" :loading="isLoging">
                                登录
                            </el-button>
                        </el-form-item>
                    </el-form>

                </div>

            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { reactive, onUnmounted, onMounted, ref} from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { login } from '@/api/login'

import { getPlaceslist } from '@/api/places'  /// 地点API
import { getCauseList } from '@/api/causes'  /// 意外伤害原因
import { getWaysList } from '@/api/ways'   /// 处理方式
import { getTrees } from '@/api/reasons'    /// 就诊原因
import { getPositionlist } from '@/api/positions'   /// 受伤部位

import useLoginInitStore from '@/stores/loginStore'

import useSystemInitStore from '@/stores/init'


const router = useRouter()
const data = reactive({
    formData: {
        userName: '',
        password: ''
    }
})
const loginStore = useLoginInitStore()
const isLoging = ref(false);
const submit = async()=>  {
    isLoging.value = true
    login(data.formData).then(res => {
        isLoging.value = false
        if(res.code == 200) {
            loginStore.token = res.data
            // 放入路由信息
            ElMessage({
                message: '用户登录成功.',
                type: 'success',
            })
            /// 初始化系统项目
            init()
            router.push({name: 'dashboard'})
        } else {
            ElMessage.error('用户名或密码错误.')
        }
    }).catch(e => {
        isLoging.value = false
        ElMessage.error('登录失败.')
    });

}

const init = () => {
    
    // 放入路由信息
    ElMessage({
        message: '系统正在初始化.',
        type: 'success',
    })
    initReg()

    ElMessage({
        message: '系统初始化完成.',
        type: 'success',
    })
}

const systemInitStore = useSystemInitStore()
// 初始化挂号数据
const initReg = () => {
    /// 事发地点
    getPlaceslist().then(res => {
        if ( res.code == 200 ) {
            systemInitStore.setPlacesList(res.data)
        } else {
            ElMessage.error('事发地点数据初始化失败.')
        }
    })

    /// 意外伤害原因
    getCauseList().then(res => {
        if ( res.code == 200 ) {
            systemInitStore.setCauseList(res.data)
        } else {
            ElMessage.error('意外伤害原因数据初始化失败.')
        }
    })

    /// 处理方式
    getWaysList().then(res => {
        if ( res.code == 200 ) {
            systemInitStore.setWaysList(res.data)
        } else {
            ElMessage.error('处理方式数据初始化失败.')
        }
    })

    /// 就诊原因
    getTrees().then(res => {
        if ( res.code == 200 ) {
            systemInitStore.setGroupsList(res.data)
        } else {
            ElMessage.error('就诊原因数据初始化失败.')
        }
    })

    /// 受伤部位
    getPositionlist().then(res => {
        if ( res.code == 200 ) {
            systemInitStore.setPositionsList(res.data)
        } else {
            ElMessage.error('受伤部位数据初始化失败.')
        }
    })


}


onMounted(() => {
    window.addEventListener('keydown', keydown)
})

onUnmounted(() => {
    window.removeEventListener('keydown', keydown, false)
})
const keydown = (e) => {
    if(e.keyCode == 13 || e.keyCode == 100) {
        submit()
    }
}



</script>

<style lang="scss" scoped>
.login-box {
    width: 100%;
    height: 100vh;
    background-color: #fafafa;
    .el-row {
        height: 100vh;
        .login-box-left {
            display: flex; 
            align-items: center; 
            justify-content: center;
        }
        .login-box-right {
            display: flex; 
            align-items: center;
            justify-content: center;
            .loginForm {
                width: 400px;
                padding: 20px;
                background-color: #fff;
                border: 1px #f3f2f2 solid;
                border-radius: 20px;
                margin: 0 auto;
                .sub-btn {
                    width: 100%;
                }
                h1 {
                    text-align: center;
                    margin: 20px 0;
                }
            }
        }
    }
    

    
}
</style>